<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Creatures: Home</title>
    <script src="script.js" defer></script>
    <style>
      .nav li {
        display: inline-block;
        margin-right: 2rem;
      }
    </style>
  </head>

  <body>
    <ul class="nav">
      <li><a href="/dom-examples/history-api/">Home</a></li>
      <li><a href="eagle" data-creature="eagle">Eagle</a></li>
      <li><a href="vulture" data-creature="vulture">Vulture</a></li>
      <li><a href="turtle" data-creature="turtle">Turtle</a></li>
    </ul>

    <p id="description">Let's look at some creatures.</p>

    <img id="photo" src="images/puffin.jpg" alt="A puffin" />
  </body>
</html>
